<template>
    <section class="index">
  		<head-top></head-top>
        <div class="index_p">
        	<div class="box"  v-for="(item,index) in indexItem" @click = "routerTo(item.goName)" :key="index">
	        	<div class="index_item">
	        			<div class="middle" >
	        			<img :src="item.icon" alt="" />
		        		<p class="title">{{item.title}}</p>
		        		<p class="span">{{item.span}}</p>
		        		</div>
	        	</div>
        	</div>
        	
        	<!--<router-link :to="{name:'lianlu'}" target="_blank" class="blank">
        		<img style="width: 15px;vertical-align: middle;margin-right: 10px;" src="../assets/lianLuicon.png"/>数据链路图
        	</router-link>-->
        	
        	<span class="blank" @click="openWindow('lianlu')">
        		<img style="width: 15px;vertical-align: middle;margin-right: 10px;" src="../assets/lianLuicon.png"/>数据链路图
        	</span>
        </div>
    </section>
</template>

<script>
    	import headTop from '@/components/headTop'
    	import hotel from '@/assets/hotel.png'
    	import zhengxin from '@/assets/zhengxin.png'
    	import chexian from '@/assets/chexian.png'
    export default {
    	components:{
    		headTop
    	},
        data() {
          return {
          		indexItem:[
          				{
          					icon:hotel,
          					title:'酒店入住',
          					span:'酒店入住身份比对及入住人员信息上传',
          					goName:'hotel'
          				},
          				{
          					icon:chexian,
          					title:'精准车险保险',
          					span:'基于城市大数据的车辆保险计算模型',
          					goName:'chexian'
          				},
          				{
          					icon:zhengxin,
          					title:'个人征信',
          					span:'基于城市大数据的个人征信计算模型',
          					goName:'gerenZhengXin'
          				}
          		]
          };
        },
        methods: {
        	routerTo(val){/*跳转*/
        		this.$router.push({name:val});
        	},
        	openWindow(val){/*有多种方法可实现跳出新窗口*/
//      		 let routeData = this.$router.resolve({ path: val });
// 				window.open(routeData.href, '_blank');
				this.$router.push({name:val});
        	}
        },
        mounted(){
        	$('.middle').mouseenter(function(){
        		console.log($(this));
        		$(this).parents('.box').css("marginTop","100px")
        	}).mouseleave(function(){
        		$(this).parents('.box').css("marginTop","116px")
        	})
        }
  };
</script>

<style scoped="scoped">
	.blank{
		    display: inline-block;
	    width: 153px;
	    position: absolute;
	    text-align: center;
	    top: 460px;
	    color: #00f8ee;
	    font-size: 15px;
	    cursor: pointer;
	    z-index: 2000;
	    text-decoration:none;
	}
	
	.middle{
		width: 270px;
    	height: 300px;
    	cursor: pointer;
	}
	.box:nth-of-type(1) .middle{
    	margin: 60px 0 0 6px;
	}
	.box:nth-of-type(2) .middle{
    	margin: 35px 0 0 217px;
	}
	.box:nth-of-type(3) .middle{
    	margin: 0px 0 0 6px;
	}
	.box:nth-of-type(1){
		z-index: 101;
	}
	.box:nth-of-type(2){
		z-index: 100;
	}
    .index{
    	background: url(../assets/bac3.png);
    	background-repeat:no-repeat; 
    	background-size:100% 100%;
    	-moz-background-size:100% 100%;
    	position: relative;
    }
    .index{
		height: 100%;
		position: relative;
		overflow: hidden;
	}
	.index_p{
		width: 1080px;
	    height: 500px;
	    margin:  auto;
	    position: relative;
	    display: -webkit-flex;
	    -webkit-justify-content: space-around;
	    display: flex;
	    justify-content: space-around;
	        position: absolute;
		    top: 0;
		    right: 0;
		    left: 0;
		    bottom: 0;
	}
	.box{
		    position: relative;
		    width: 270px;
		    height: 300px;
		    /*background: orange;*/
		    margin-top: 0px;
		    margin-top: 116px;
		    transition: all 0.2s;
			-moz-transition: all 0.2s; /* Firefox 4 */
			-webkit-transition: all 0.2s; /* Safari 和 Chrome */
			-o-transition: all 0.2s; /* Opera */
			z-index: 100;
	}
	.index_item{
		position: absolute;
		color: #fff;
	}
	.index_item img{
		width: 60px;
    	height: 55px;
		
	}
	.index_item img,.index_item .title,.index_item .span{
		position: absolute;
	}
	.index_item .title{
		font-size: 25px;
   		color: #9dd0ff;
	}
	.index_item .span{
		font-size: 15px;
   		color: #fff;
   		 width: 180px;
	    text-align: center;
	}
	
	.box:nth-of-type(1) .index_item{
		width: 280px;
	    height: 433px;
	    background: url(../assets/index_first.png);
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    -moz-background-size: 100% 100%;
	    top: -62px;
   		 left: -6px;
   		 /*z-index: 101;*/
	}
	.box:nth-of-type(2) .index_item{
		    width: 739px;
		    height: 537px;
		    background: url(../assets/index_second.png);
		    background-repeat: no-repeat;
		    background-size: 100% 100%;
		    -moz-background-size: 100% 100%;
		    top: -31px;
    		left: -216px;
    			/*z-index: 10;*/
	}
	.box:nth-of-type(3) .index_item{
		width: 335px;
	    height: 357px;
	    background: url(../assets/index_third.png);
	    top: -3px;
	    left: -4px;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	}
	.box:nth-of-type(1) img{
		top: 100px;
    	left: 108px;
	}
	.box:nth-of-type(2) img{
		     top: 76px;
		    left: 323px;
		    height: 48px;
	}
	.box:nth-of-type(3) img{
		top: 50px;
	    left: 110px;
	    height: 43px;
	}
	.box:nth-of-type(1) .title{
		    top: 200px;
    		left: 88px;
	}
	.box:nth-of-type(2) .title{
		    top: 169px;
    		left: 275px;
	}
	.box:nth-of-type(3) .title{
		       top: 141px;
    left: 86px;
	}
	 
	.box:nth-of-type(1) .span{
		
   		top: 266px;
	    left: 50px;
	}  
	.box:nth-of-type(2) .span{
		    top: 240px;
    		left: 262px;
	}  
	.box:nth-of-type(3) .span{
		top: 213px;
   		left: 50px;
	} 
	/*.middle:hover .box:nth-of-type(3){
		margin-top: 100px;
	}*/

</style>